import React, {
  useState,
  useEffect
} from 'react';
import { Button, Form, Input, Radio, Checkbox, Modal,Collapse, Switch, Select, Table } from 'antd';
import louyu from '../assets/css/louyu.module.css'
import { DownOutlined, UpOutlined, CloseOutlined } from '@ant-design/icons';
import axios from '../axios/index'
import custom from '../assets/css/custom/customIndex.module.css';
import space from '../assets/css/space.module.css'
import cont from '../assets/js/cont';
import Detailspace from '../action/Detailspace'
import { message } from 'antd';
export default function Space() {
  function getImg(url) {
    return new URL(url, import.meta.url).href;
  }

  useEffect(() => {
    getData()
  }, [])
  let [bol, setBol] = useState(false);
  let [bool, setBool] = useState(false);
  let [boolean, setBoolean] = useState(false);
  let [shu, setShu] = useState(false);
  let [edit, setEdit] = useState(false);
  let [isModalOpen, setIsModalOpen] = useState(false);
  let [id, setId] = useState(0);
  let [tableData, setTable] = useState([]);
  let [data, setData] = useState([]);
  let [spaceName, setSpace] = useState('');
  let [build, setBuild] = useState('');
  let [spacefloor, setfloor] = useState('');
  let [spaceDer, setDer] = useState('');
  let [spaceFace, setFace] = useState('');
  let [area, setArea] = useState('');
  let [info, setInfo] = useState('');
  let [rent, setRent] = useState('');
  let [item, setitem] = useState({});
  // 折叠
  const [collapsed, setCollapsed] = useState(true);
  // 展开
  const handleCollapse = () => {
    setCollapsed(!collapsed);
  };

  // 分页器
  const itemRender = (page, type, originalElement) => {
    if (type === 'prev') {
      return;
    }
    if (type === 'next') {
      return <a>下 一页</a >;
    }

    return originalElement;
  };
  const der = [
    {
      value: '毛坯',
      label: '毛坯'
    },
    {
      value: '简装',
      label: '简装'
    },
    {
      value: '精装',
      label: '精装'
    }
  ]

  const face = [
    {
      value: '东',
      label: '东'
    },
    {
      value: "南",
      label: "南"
    },
    {
      value: "西",
      label: "西"
    },
    {
      value: "北",
      label: "北"
    },
    {
      value: "东南",
      label: "东南"
    },
    {
      value: "西南",
      label: "西南"
    },
    {
      value: '东北',
      label: '东北'
    },
    {
      value: "西北",
      label: "西北"
    }
  ]
  const option = [
    {
      label: '国贸一期A座',
      value: '国贸一期A座'
    },
    {
      label: '国贸一期B座',
      value: '国贸一期B座'
    },
    {
      label: '国贸一期C座',
      value: '国贸一期C座'
    },
    {
      label: '国贸二期A座',
      value: '国贸二期A座'
    },
    {
      label: '国贸二期B座',
      value: '国贸二期B座'
    },
  ]
  const floor = [
    {
      label: '1层',
      value: '1层'
    },
    {
      label: '2层',
      value: '2层'
    },
    {
      label: '3层',
      value: '3层'
    },
    {
      label: '4层',
      value: '4层'
    },
    {
      label: '5层',
      value: '5层'
    }
  ]
  // 表头 
  const columns = [
    {
      title: '名称',
      dataIndex: 'name',
      key: 'name',
      render:(text,row)=>{
        return <span style={{
          marginLeft:15,
          color:'#8479e3',
          cursor:'pointer'
        }} onClick={()=>{
          setitem(row)
          setEdit(true)
        }}>{text}</span>
      }
    },
    {
      title: '楼宇',
      dataIndex: 'build',
      key: 'build',
    },
    {
      title: '楼层',
      dataIndex: 'floor',
      key: 'floor',
    },
    {
      title: '面积（㎡）',
      dataIndex: 'area',
      key: 'area',
    },
    {
      title: '装修',
      dataIndex: 'decoration',
      key: 'decoration',
    },
    {
      title: '朝向',
      dataIndex: 'face',
      key: 'face',
    },
    {
      title: '状态',
      dataIndex: 'state',
      key: 'state',
      render: (text, row) => {

        return (
          <>
            <Switch checkedChildren="上架中" unCheckedChildren="已下架"   defaultValue={text} onChange={(e) => {
              console.log(e);
              setId(row.id)
              axios.put('/api/space/edit',{
                id:row.id,
                state:e?1:0
              }).then(res=>{
                getData()
              })
            }} />
          </>
        )
      },
    },
    {
      title: '操作',
      dataIndex: 'live',
      key: 'live',
      render: (text,row) => {
        return (
          <>
            <img src={getImg('../assets/images/edit.png')} style={{
              width: 14,
              height: 14
            }} alt=""  />
            <img src={getImg('../assets/images/delete.png')} style={{
              width: 14,
              height: 14,
              marginLeft: 10
            }} alt=""  onClick={()=>{
              setIsModalOpen(true)
              delHan(row.id)
            }}/>
          </>
        )
      },
    },
  ];
// 删除

function delHan(id){
  axios.delete('/api/space/del',{
    params:{
      id:id
    }
  }).then(res=>{
    console.log(res);
    
  })
}
  // 表格静态数据
  const staticTbale = [
    {
      key: '1',
      company: "北京西天取经",
      Isstart: false,
      running: false,
      Isover: false,
      area: null,
      lived: null,
      tolive: null,
    },
    {
      key: '2',
      company: "张泽良123564456",
      Isstart: true,
      running: true,
      Isover: false,
      area: null,
      lived: 150,
      tolive: 100,
    },
    {
      key: '3',
      company: "华彩科技(北京)有限公司",
      Isstart: true,
      running: true,
      Isover: false,
      area: 80,
      lived: null,
      tolive: null,
    },
    {
      key: '4',
      company: "华采科技(北京)有限公司",
      Isstart: false,
      running: false,
      Isover: false,
      area: 1000,
      lived: null,
      tolive: null,
    },
    {
      key: '5',
      company: "百度网络科技有限公司",
      Isstart: false,
      running: true,
      Isover: false,
      area: 50,
      lived: 80,
      tolive: 50,
    },
    {
      key: '6',
      company: "北京西天取经1",
      Isstart: true,
      running: true,
      Isover: false,
      area: 80,
      lived: 20,
      tolive: 10,
    },
    {
      key: '7',
      company: "北京西天取经2",
      Isstart: false,
      running: false,
      Isover: false,
      area: 100,
      lived: 80,
      tolive: 3,
    },
  ];

  // 渲染表格数据
  const getData = () => {
    axios.get('/api/space').then(res => {
      console.log(res);
      setTable([...res.data])
        setData([...res.data])
    })
  }

  // 点击保存
  const save = () => {
      axios.post('/api/space/rent',{
        name:spaceName,
        rent:rent,
        tax:shu==true?1:0
      }).then(res=>{
        console.log(res);
        setBoolean(false)
        setSpace('');
      setBuild('');
      setfloor('');
        setRent('')
      })
  }

  // 保存添加空间

  const addSpace = () => {
    if (spaceName == '' || build == '' || spacefloor == '' || area == '') {
      message.info('请输入新建的数据')
      return;
    }
    axios.post('/api/space/add', {
      name: spaceName,
      build: build,
      floor: spacefloor,
      area: area,
      face: spaceFace,
      der: spaceDer,
      info: info,

    }).then(res => {
      console.log(res);
      
      setDer('');
      setFace('');
      setArea('');
      setInfo('');
      setBol(false)
      setBool(true)
    })
  }


// 查询空间
function selectHan(){
  axios.get('/api/space/sel',{
    params:{
      name:spaceName,
      floor:spacefloor,
      build:build
    }
  }).then(res=>{
    console.log(res);
    setTable([...res.data])
  })
}


// 重置
function resetHan(){
  getData()
  setfloor('')
  setSpace('')
  setBuild('')
  location.reload()
}



// 点击确定

 const handleOk=()=>{
   delHan()
  setIsModalOpen(false)
getData()
 }
//  点击取消
const handleCancel=()=>{
  setIsModalOpen(false)
}
  return (
    <cont.Provider
    value={{
      data:item,
      close:()=>{
        setEdit(false)
      },
      getData:getData
    }}
    
    >
    <div>
      <div className={custom.box}>
        <Button className={custom.newcustom} onClick={() => {
          setBol(true)
        }}>新建客户</Button>
        {boolean && <div className={space.fixed}>
          <div className={space.content}>
            <div className={space.top}>
              <p>
                空间单位租金
              </p>
              <CloseOutlined onClick={() => {
                setBoolean(false)

              }} />
            </div>
            <div style={{
              marginTop:20,
              marginBottom:20
            }}>
              <input type="text" placeholder='输入租金数额' value={rent}
              style={{
                width:368,
                height:36,
                paddingLeft:20,
                outline:'none'
              }}
               onChange={(e) => {

                setRent(e.target.value)
              }} />
              <span>&nbsp; &nbsp;元/㎡.天</span>
            </div>
            <Checkbox value={shu} onChange={(e)=>{
              console.log(e.target.checked);
              setShu(e.target.checked)
              
            }}>不含税</Checkbox>
            <button className={space.btn} style={{
              width: 430,
              margin:0
            }} onClick={()=>{
              save()
              getData()
            }}>保存</button>
          </div>
        </div>}
        {bool && <div className={space.fixed}>

          <div className={space.con}>
            <CloseOutlined className={space.cuo} onClick={()=>setBool(false)}/>
            <img src={getImg('../assets/images/space.png')} alt="" />
            <div>{build}{spacefloor}{spaceName}空间创建完成！</div>
            <div style={{
              color: '#8479E3',
              marginTop: 10,
              cursor:'pointer'
            }} onClick={() => {
              setBoolean(true)
              setBool(false)
            }}>编辑单位租金&gt;</div>

          </div>
        </div>}
        {bol && <div className={space.fixed}>
          <div className={space.content}>
            <div className={space.top}>
              <p>
                新建空间
              </p>
              <CloseOutlined onClick={() => {
                setBol(false)
              }} />
            </div>
            <Form
              layout="vertical"
              style={{
                marginTop: 10
              }}
            >
              <Form.Item
                label='空间'
                required
                rules={[
                  {
                    required: true,
                    message: 'Please input your username!',
                  }
                ]}
              >
                <Input placeholder='请输入' value={spaceName} style={{
                  background: ' #F8FBFF'
                }} onChange={(e) => {
                  setSpace(e.target.value)
                }} />
              </Form.Item>
              <div className={space.input}>

                <Form.Item
                  label='所属楼宇'
                  required
                >
                  <Select
                    defaultValue="请选择"
                    style={{
                      width: 200,
                      marginRight: 20,
                      background: ' #F8FBFF'
                    }}
                    onChange={(e) => {
                      setBuild(e)

                    }}
                    options={option}
                  ></Select>
                </Form.Item>
                <Form.Item
                  label='所属楼层'
                  required
                >
                  <Select
                    defaultValue="请选择"
                    style={{
                      width: 200,
                      marginRight: 20,
                      background: ' #F8FBFF'
                    }}
                    onChange={(e) => {
                      setfloor(e)
                    }}
                    options={floor}
                  ></Select>
                </Form.Item>
              </div>
              <Form.Item
                label='面积'
                required
                rules={[
                  {
                    required: true,
                    message: 'Please input your username!',
                  }
                ]}
              >
                <Input value={area} style={{
                  background: ' #F8FBFF'
                }} onChange={(e) => {
                  setArea(e.target.value)
                }} />
              </Form.Item>
              <div className={space.input} style={{
                border: 'none'
              }}>

                <Form.Item
                  label='装修'

                >
                  <Select
                    defaultValue="请选择"
                    style={{
                      width: 200,
                      marginRight: 20,
                      background: ' #F8FBFF'
                    }}
                    onChange={(e) => {
                      setDer(e)
                    }}
                    options={der}
                  ></Select>
                </Form.Item>
                <Form.Item
                  label='朝向'

                >
                  <Select
                    defaultValue="请选择"
                    style={{
                      width: 200,
                      marginRight: 20,
                      background: ' #F8FBFF'
                    }}
                    onChange={(e) => {
                      setFace(e)
                    }}
                    options={face}
                  ></Select>
                </Form.Item>

              </div>
              <Form.Item
                label='空间备注'
              >
                <Input.TextArea
                  rows={4}
                  placeholder='600个字以内'
                  value={info}
                  style={{
                    background: ' #F8FBFF'
                  }} onChange={(e) => {

                    setInfo(e.target.value)


                  }} />
              </Form.Item>
            </Form>
            <button className={space.btn} onClick={() => {
              addSpace()

            }}>保存</button>

          </div>
        </div>
        }
        {data.length>0?<div>
        <div className={custom.top}>
          <div className={custom.topbox}>
            <Select
              defaultValue="请选择楼宇"
              style={{
                width: 120,
                marginRight: 20
              }}
              onChange={(e) => {
                setBuild(e)
              }}
              options={option}
            />
            <Select
              defaultValue="请选择楼层"
              style={{
                width: 120,
                marginRight: 20
              }}
              onChange={(e) => {
                setfloor(e)
              }}
              options={floor}
            />
            <Input className={custom.cusnameInput} value={spaceName} onChange={(e) => {
              setSpace(e.target.value)
            }} placeholder='请输入空间名称' />
            <div className={custom.show}>
              {/* 筛选折叠 */}
              {!collapsed && (
                <>
                  <div className={custom.state}>
                    <span>状态</span>
                    <Checkbox.Group style={{
                      marginLeft: 70
                    }}>
                      <Checkbox value='上架中'>上架中</Checkbox>
                      <Checkbox value='已下架'>已下架</Checkbox>

                    </Checkbox.Group>
                  </div>
                  <div className={custom.row}>
                    <span>面积</span>
                    <Input className={custom.input} /> <span>m<sup>2</sup></span>
                    <span className={custom.bolang}>~</span><Input className={`${custom.input} ${custom.day}`} /><span>m<sup>2</sup></span>
                  </div>
                  <div className={custom.row}>
                    <span>装修</span>
                    <Checkbox.Group style={{
                      marginLeft: 70
                    }}>
                      {
                        der.map(item => {
                          return <Checkbox key={item.value} value={item.value}>{item.value}</Checkbox>
                        })
                      }

                    </Checkbox.Group>
                  </div>
                  <div className={custom.row}>
                    <span>朝向</span>
                    <Checkbox.Group style={{
                      marginLeft: 70
                    }}>
                      {
                        face.map(item => {
                          return <Checkbox key={item.value} value={item.value}>{item.value}</Checkbox>
                        })
                      }

                    </Checkbox.Group>
                  </div>
                </>
              )}
              <div className={custom.line}>
                <div className={custom.collapseButton} onClick={handleCollapse}>
                  <span className={custom.zhankai}>
                    {collapsed ? <div><DownOutlined />展开筛选</div> : <div><UpOutlined />收起筛选</div>}
                  </span>
                </div>
              </div>
              <div className={custom.btns}>
                <Button type="primary" onClick={()=>{
                  selectHan()
                }}>查询</Button>
                <Button className={custom.rest} onClick={()=>{
                  resetHan()
                }}>重置</Button>
              </div>
            </div>
          </div>
        </div>
        <div className={custom.bottom}>
          <div className={custom.bottombox}>
            <Table
              columns={columns}
              dataSource={tableData}
              // 分页器
              pagination={{
                pageSize: 5, // 每页显示5条数据
                total: tableData.length, // 总数据条数
                showTotal: (total, range) => `共${total}条记录,每页${range[1] - range[0] + 1}条`,
                itemRender, // 使用自定义的分页器渲染
                showQuickJumper: true, // 启用快速跳转
              }}
            />
             <Modal title="此操作是不可恢复的！" open={isModalOpen} onOk={handleOk} onCancel={handleCancel}
              okText="确认"
              cancelText="取消"
            >
              <p>您确认要执行此删除操作吗?</p>
            </Modal>
          </div>
          </div>
          </div>
          :<div className={louyu.weit}>
            <img src={getImg('../assets/images/weit.png')} alt="" />
            <div>项目下未创建空间～</div>
            </div>}
      </div>
    </div>
   {edit&&<Detailspace item={item}></Detailspace>} 
    </cont.Provider>
  )
}
